<style scoped>
</style>

<template>
  <div class="vue-box view-9812321">
    <div class="c-panel login">
      <div class="c-title" style="color: #0466c5;text-align: center"><h1>用户添加</h1></div>
			<el-form size="mini" v-if="m">
				<el-form-item label="用户名：">
					<el-input v-model="m.username"></el-input>
				</el-form-item>
				<el-form-item label="密码：">
					<el-input type="password" v-model="m.password"></el-input>
				</el-form-item>
        <el-form-item label="请在输入一次密码：">
          <el-input type="password" v-model="m.password2"></el-input>
        </el-form-item>
				<el-form-item label="选择角色：">
					<el-select v-model="m.role_id">
            <el-option label="请选择" :value="0" disabled></el-option>
            <el-option
              v-for = "item in dataList"
              :label="item.rname"
              :value="item.rid"
              :key="item.rid"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
          <el-button type="primary" @click="ok()">提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import {encrypt} from '@/static/aes'
	export default {
		data() {
			return {
				m: {
					username: '',
					password: '',
          password2: '',
					phone: '',
					role_id: 0,
					sex: 1,
				},
        dataList : []
			}
		},
		methods: {
      show () {
        this.sa.ajax('/role/findBy',null,function (res) {
          this.dataList = res.data
        }.bind(this))
      },
      submit_check: function() {
        if(this.sa.isNull(this.m.username)) {
          return this.sa.error('请输入用户名!');
        }
        var reg = /^(?![\\d]+$)(?![a-zA-Z]+$)(?![^\\da-zA-Z]+$)([^\u4e00-\u9fa5\\s]){6,20}$/
        if(!reg.test(this.m.password)) {
          return this.sa.error('密码要求6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种!');
        }
        if(this.m.password != this.m.password2) {
          return this.sa.error('密码两次输入不一致!');
        }
        if(this.m.role_id == 0) {
          return this.sa.error('请选择角色!');
        }
        return 'ok';
      },
			ok: function() {
        if(this.submit_check() != 'ok') {
          return
        }
        let p = encrypt(this.m.password);
				this.sa.ajax('/login/insertUser',
            {'uname' : this.m.username, 'upass' : p, 'rid' : this.m.role_id},
            function () {
              this.sa.ok('新用户添加成功!')
              this.m.username = ''
              this.m.password = ''
              this.m.password2 = ''
            }.bind(this)
        )
			}
		},
		created() {
        this.show()
		}
	}
</script>
<style scoped>
.login{
  width: 400px;
  height: 300px;
  /* 把元素变成定位元素 */
  position: absolute;
  /* 元素距离上，左都为50% */
  left: 50%;
  top: 30%;
  /* 让元素的左外边距，上外边距为元素宽高的1/2 注意margin是负距*/
  margin-top: -150px;
  margin-left: -200px;
  text-align: center
}
</style>


